<template>
  <div class="page-wrap">
    <el-row :gutter="12">
      <el-col :span="14">
        <el-card shadow="never">
          <template #header>
            <div class="toolbar">
              <el-input v-model="filters.search" placeholder="搜索姓名/账号/电话" clearable class="w-300" />
              <el-select v-model="filters.roleId" placeholder="角色" clearable class="w-180">
                <el-option v-for="r in roleOptions" :key="r.value" :label="r.label" :value="r.value" />
              </el-select>
              <el-select v-model="filters.status" placeholder="状态" clearable class="w-140">
                <el-option label="启用" value="enabled" />
                <el-option label="停用" value="disabled" />
              </el-select>
              <el-button type="primary" @click="openUserEdit()">新增员工</el-button>
              <el-button @click="exportUsers()">导出</el-button>
            </div>
          </template>

          <el-table :data="userList" border stripe>
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="account" label="账号" width="140" />
            <el-table-column prop="phone" label="电话" width="140" />
            <el-table-column label="角色" min-width="180">
              <template #default="{ row }">{{ roleNames(row.roles) }}</template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100" />
            <el-table-column prop="createdAt" label="创建日期" width="140" />
            <el-table-column label="操作" width="220" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="openUserEdit(row)">编辑</el-button>
                <el-button size="small" @click="toggle(row)">{{ row.status==='enabled'?'停用':'启用' }}</el-button>
                <el-button size="small" type="danger" @click="delUser(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="never">
          <template #header>
            <div class="toolbar">
              <span>角色与权限</span>
              <el-button type="primary" @click="openRoleEdit()">新增角色</el-button>
            </div>
          </template>

          <el-table :data="roles" border stripe>
            <el-table-column prop="name" label="角色" width="120" />
            <el-table-column prop="description" label="说明" />
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="openRoleEdit(row)">编辑</el-button>
                <el-button size="small" type="danger" @click="delRole(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 员工编辑 -->
    <el-dialog v-model="userVisible" :title="userForm.id?'编辑员工':'新增员工'" width="620px">
      <el-form :model="userForm" label-width="100px">
        <el-form-item label="姓名"><el-input v-model="userForm.name" /></el-form-item>
        <el-form-item label="账号"><el-input v-model="userForm.account" /></el-form-item>
        <el-form-item label="电话"><el-input v-model="userForm.phone" /></el-form-item>
        <el-form-item label="状态"><el-select v-model="userForm.status"><el-option label="启用" value="enabled"/><el-option label="停用" value="disabled"/></el-select></el-form-item>
        <el-form-item label="角色">
          <el-select v-model="userForm.roles" multiple collapse-tags collapse-tags-tooltip filterable placeholder="选择角色">
            <el-option v-for="r in roles" :key="r.id" :label="r.name" :value="r.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="userVisible=false">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>
    </el-dialog>

    <!-- 角色编辑 -->
    <el-dialog v-model="roleVisible" :title="roleForm.id?'编辑角色':'新增角色'" width="720px">
      <el-form :model="roleForm" label-width="100px">
        <el-form-item label="角色名"><el-input v-model="roleForm.name" /></el-form-item>
        <el-form-item label="说明"><el-input v-model="roleForm.description" /></el-form-item>
        <el-form-item label="权限">
          <div class="perm-group" v-for="group in permissionCatalog" :key="group.key">
            <div class="perm-title">{{ group.name }}</div>
            <el-checkbox-group v-model="roleForm.permissions">
              <el-checkbox v-for="item in group.items" :key="item.key" :label="item.key">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="roleVisible=false">取消</el-button>
        <el-button type="primary" @click="saveRole">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useStaffStore } from '@/stores/staff.js'
const s = useStaffStore()
onMounted(()=> s.initialize())

// 过滤
const filters = reactive({ search:'', roleId:'', status:'' })
const userList = computed(()=> s.getFilteredUsers(filters))
const roles = computed(()=> s.roles)
const roleOptions = computed(()=> s.roleOptions)
const permissionCatalog = s.permissionCatalog

// 员工
const userVisible = ref(false)
const userForm = reactive({ id:'', name:'', account:'', phone:'', status:'enabled', roles:[] })
function openUserEdit(row){ Object.assign(userForm, row || { id:'', name:'', account:'', phone:'', status:'enabled', roles:[] }); userVisible.value=true }
function saveUser(){ if(userForm.id) s.updateUser(userForm.id, userForm); else s.addUser(userForm); userVisible.value=false }
function delUser(row){ s.removeUser(row.id) }
function toggle(row){ s.toggleUserStatus(row.id) }
function exportUsers(){ s.exportUsers(userList.value) }
function roleNames(roleIds){ return (roleIds||[]).map(id=> roles.value.find(r=>r.id===id)?.name || id).join('、') || '-' }

// 角色
const roleVisible = ref(false)
const roleForm = reactive({ id:'', name:'', description:'', permissions:[] })
function openRoleEdit(row){ Object.assign(roleForm, row || { id:'', name:'', description:'', permissions:[] }); roleVisible.value=true }
function saveRole(){ if(roleForm.id) s.updateRole(roleForm.id, roleForm); else s.addRole(roleForm); roleVisible.value=false }
function delRole(row){ s.removeRole(row.id) }
</script>

<style scoped>
.page-wrap { padding: 16px; }
.toolbar { display: flex; gap: 12px; align-items: center; }
.w-300 { width: 300px; }
.w-180 { width: 180px; }
.w-140 { width: 140px; }
.perm-group { margin-bottom: 12px; }
.perm-title { font-weight: 600; margin-bottom: 6px; }
</style>


